<template>
  <div class="app-container">
    <Search :crud="crud">
      <el-form-item label="俱乐部标题">
        <el-input v-model="query.clubTheme" placeholder="请输入"></el-input>
      </el-form-item>
    </Search>
    <el-card>
      <div class="head-container">
        <crudOperation :permission="permission">
          <template slot="right">
            <el-button
              size="mini"
              class="filter-item"
              type="warning"
              icon="el-icon-download"
              @click="downloadMethod"
              :loading="exprotLoad"
              >导出</el-button
            >
          </template>
        </crudOperation>
      </div>
      <el-table
        ref="table"
        border
        v-loading="crud.loading"
        :data="crud.data"
        style="width: 100%"
        @selection-change="crud.selectionChangeHandler"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          fixed="left"
        />
        <el-table-column label="序号" type="index" width="50" align="center" />
        <el-table-column
          label="俱乐部标题"
          prop="clubTheme"
          minWidth="200"
          align="center"
        />
        <el-table-column prop="clubType" label="俱乐部类型" align="center">
          <template slot-scope="scope">
            <div>{{ showDictValue(scope.row.clubType, dict.CLUB_TYPE) }}</div>
          </template>
        </el-table-column>

        <el-table-column
          prop="userName"
          label="报名人名称"
          align="center"
        />
        <el-table-column prop="createdByName" label="创建人" align="center" />
        <el-table-column prop="createdAtView" label="创建时间" align="center" />
      </el-table>
      <!--分页组件-->
      <pagination />
    </el-card>
  </div>
</template>

<script>
import CRUD, { presenter, header, crud } from '@crud/crud'
// import crud from '@/mixins/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import udOperation from '@crud/UD.operation'
import Search from '@/components/Search'
import { showDictValue } from '@/utils'
import apiFun from '@/api/club/clubRegistration'
import exportTableData from '../../utils/export'
export default {
  name: 'feedback',
  components: { crudOperation, pagination, udOperation },
  // cruds() {
  //   return CRUD({
  //     title: "报名记录",
  //     url: "club/getClubRegistration",
  //     requestMethod: "post",
  //     sort: ["id,desc"],
  //     params: { clubId: "" }
  //   });
  // },
  mixins: [presenter(), header(), crud()],
  // 数据字典
  dicts: ['CLUB_TYPE'],
  data() {
    return {
      permission: {
        add: ['admin', 'job:add'],
        edit: ['admin', 'job:edit'],
        del: ['admin', 'job:del'],
      },
      exprotLoad: false,
    }
  },
  beforeCreate() {
    this.crud = CRUD({
      title: '报名记录',
      url: 'clubRegistration/list',
      requestMethod: 'post',
      sort: ['id,desc'],
      params: { clubId: this.$route.query.id },
    })
    console.log(this.crud)

    // 手动注册 crud 实例
    this.$crud = this.$crud || {}
    this.$crud[this.crud.tag] = this.crud
    this.crud.registerVM('presenter', this, 0)
  },
  methods: {
    showDictValue,
    // 导出

    downloadMethod() {
      this.exprotLoad = true
      apiFun
        .apiExport()
        .then((response) => {
          // 检查响应数据
          if (response.status === 200) {
            const data = response.data
            const blob = new Blob([data], {
              type: 'application/vnd.ms-excel;charset=UTF-8',
            })
            const link = document.createElement('a')
            link.href = URL.createObjectURL(blob)
            link.download = '俱乐部报名记录表.xls'
            link.style.display = 'none'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        .finally(() => {
          this.exprotLoad = false
        })
      // exportTableData(url)
    },
  },
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-input-number .el-input__inner {
  text-align: left;
}
.item {
  margin-top: 10px;
  margin-right: 10px;
}
</style>
